<template>
  <div class="col-3">
    <el-button @click="create1">+添加团队人员</el-button>
    <el-dialog width="450px" :title="title" v-model="dialogVisible">
      <el-form
size="default"
        :model="formdata"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="选择用户">
          <el-avatar
            :size="size"
            :src="circleUrl"
            @click="dialogVisible2 = true"
          ></el-avatar>
        </el-form-item>
        <el-form-item label="是否是管理员">
          <el-radio-group v-model="formdata.isAdmin">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择团队组">
          <el-select v-model="formdata.teamusergroupid" placeholder="请选择">
            <el-option
              v-for="item in group"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-dialog width="950px" title="" v-model="dialogVisible2">
        <User v-bind="{ userhandleCurrentChange, selectarr }"></User>
      </el-dialog>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
import { asyncadminaddteamuser, asyncselectuser } from "../../../api";
import study from "../../../mysql_interface/studycodemodel";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import User from "../User/index.vue";
export default defineComponent({
  name: "teamAddquestion",
  props: ["ID", "teamid", "teamuser", "create", "group", "teamusers", "start"],
  components: {
    User,
  },
  setup(p) {
    const formdata = reactive(toRefs<study.Iteamuser>(p.teamuser));
    const dialogVisible = ref(false);
    const dialogVisible2 = ref(false);
    // 选中的用户id
    const userinfo = reactive<study.Iuser>({});
    const circleUrl = computed(() => {
      if (userinfo.headportrait) return userinfo.headportrait;
      if (p.teamuser) return p.teamuser.user?.headportrait;
      return "";
    });

    const title = computed(() => {
      if (p.ID) {
        return "修改";
      }
      return "创建";
    });

    const username = ref();

    watch(
      () => p.ID,
      () => {
        dialogVisible.value = true;
      }
    );

    watch(
      () => p.teamuser,
      () => {
        Object.assign(formdata, toRefs(p.teamuser));
      }
    );

    async function submit() {
      if (userinfo.ID) {
        formdata.userid = userinfo.ID;
      }
      formdata.jurisdiction = "1";
      formdata.teamid = Number(p.teamid);
      try {
        await asyncadminaddteamuser(formdata);
        ElMessage.success(title.value + "成功");
        dialogVisible.value = false;
        if (p.start) p.start();
      } catch (e: any) {
        ElMessage.error(e);
      }
    }
    async function create1() {
      p.create();
      dialogVisible.value = true;
    }

    function userhandleCurrentChange(data: study.Iuser) {
      Object.assign(userinfo, toRefs(data));
      dialogVisible2.value = false;
    }

    return {
      title,
      formdata,
      submit,
      dialogVisible,
      username,
      create1,
      userhandleCurrentChange,
      circleUrl,
      dialogVisible2,
    };
  },
});
</script>


